<template>
  <div id="app">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :inline="true" :model="formQueryCondition"
                         ref="form" size="mini">
                    <el-form-item :label="$t('CDNBuild.state')" >
                        <el-select v-model="formQueryCondition.state.val" class="available">
                            <el-option :label="$t('CDNBuild.all')" value="all"></el-option>
                            <el-option :label="$t('CDNBuild.available')" value="available"></el-option>
                            <el-option :label="$t('CDNBuild.unavailable')" value="unavailable"></el-option>
                        </el-select>
                    </el-form-item>
                    <div style="text-align:right">
                        <el-form-item>
                            <el-button type="primary" @click="onAdd" :loading="loading"> {{ $t('specialLibrary.add') }} </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onDelete" :loading="loading"> {{ $t('specialLibrary.delete') }} </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onQuery" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <div class="dataBox" ref="dataBox">
                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                      
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border
                            @row-click='tableCellClick'>
                    <el-table-column type="selection" >
                    </el-table-column>       
                    <el-table-column prop="id" min-width="110" 
                                        :label="$t('CDNBuild.id')">
                    </el-table-column>
                    <el-table-column prop="name" min-width="110"
                                        :label="$t('CDNBuild.name')">
                    </el-table-column>
                    <el-table-column prop="serviceName" min-width="110" 
                                        :label="$t('CDNBuild.serviceName')">
                    </el-table-column>
                    <el-table-column prop="messageType" min-width="110" 
                                        :label="$t('CDNBuild.messageType')">
                    </el-table-column>
                    <el-table-column prop="protocolType" min-width="110"
                                        :label="$t('CDNBuild.protocolType')">
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <div class="pageBox" ref="pageBox">
            <el-pagination @size-change="sizeChange"  
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>



        <!--编辑对话框-->
        <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowEditForm" top="5vh" >
            <el-form :model="editForm" ref="editForm" 
                     :label-position="editFormPosition" status-icon=status-icon :rules="editRules">
                <el-form-item :label="'CDN '+$t('CDNBuild.name')" :label-width="editformLabelWidth" prop="name">
                    <el-input v-model.trim="editForm.name" maxlength="20"
                              :placeholder="'CDN '+$t('CDNBuild.name')"></el-input>
                </el-form-item>
                <el-form-item :label="'CDN '+$t('CDNBuild.serviceName')" 
                              :label-width="editformLabelWidth" prop="serviceName">
                    <el-input v-model.trim="editForm.serviceName" maxlength="50"
                              :placeholder="'CDN '+$t('CDNBuild.serviceName')" ></el-input>
                </el-form-item>

                <el-form-item :label="'CDN '+$t('CDNBuild.domainName')" :label-width="editformLabelWidth" prop="serviceAddress">
                    <el-input v-model.trim="editForm.serviceAddress" maxlength="50"
                              :placeholder="'CDN '+$t('CDNBuild.domainName')"></el-input>
                </el-form-item>
                <el-form-item :label="'CDN '+$t('CDNBuild.userName')" :label-width="editformLabelWidth" prop="userName">
                    <el-input v-model="editForm.userName" maxlength="100"
                              :placeholder="'CDN '+$t('CDNBuild.userName')"></el-input>
                </el-form-item>
                <el-form-item :label="'CDN '+$t('CDNBuild.userPassword')" :label-width="editformLabelWidth" prop="userPassword">
                    <el-input v-model="editForm.userPassword" maxlength="100"
                              :placeholder="'CDN '+$t('CDNBuild.userPassword')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('CDNBuild.protocolAddress')" :label-width="editformLabelWidth" prop="protocolAddress">
                    <el-input v-model="editForm.protocolAddress" maxlength="100"
                              :placeholder="'CDN '+$t('CDNBuild.protocolAddress')"></el-input>
                </el-form-item>
                <el-form-item :label="'CDN '+$t('CDNBuild.requestAddress')" :label-width="editformLabelWidth" prop="requestAddress">
                    <el-input v-model="editForm.requestAddress" maxlength="100"
                              :placeholder="'CDN '+$t('CDNBuild.requestAddress')"></el-input>
                </el-form-item>
                <el-form-item :label="'CDN '+$t('CDNBuild.callBackAddress')" :label-width="editformLabelWidth" prop="callBackAddress">
                    <el-input v-model="editForm.callBackAddress" maxlength="100"
                              :placeholder="'CDN '+$t('CDNBuild.callBackAddress')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('CDNBuild.messageType')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.messageType">
                        <el-option :label="$t('CDNBuild.messageType') + 1" value="one"></el-option>
                        <el-option :label="$t('CDNBuild.messageType') + 2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('CDNBuild.protocolType')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.protocolType">
                        <el-option label="TV通用" value="TV"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('CDNBuild.serviceProvider')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.serviceProvider">
                        <el-option label="中兴分发服务" value="zte"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button size="mini" @click="isShowEditForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                <el-button size="mini" type="primary" @click="submitForm('editForm')" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
            </div>
        </el-dialog>
  </div> 
</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'CDNBuild',
  data () {
    return {
        modelName:"CDN.Model.EntityData.CDNBuild",
        isInit:false,
        tableHeight:100,
        // 查询条件
        formQueryCondition: {
            state: {
                val: "all",
            }
        },
        // 编辑面板绑定的对象
        editForm: {
            name: "",
            serviceName: "",
            serviceAddress: "",
            userName:"",
            userPassword:"",
            protocolAddress:"",
            requestAddress:"",
            callBackAddress:"",
            messageType: "",
            protocolType: "",
            serviceProvider:""
        },
        // 编辑面板的验证规则
        editRules: {
            name: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.name'), trigger: 'blur' }],
            serviceName: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.serviceName'), trigger: 'blur' }],
            serviceAddress: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.domainName'), trigger: 'blur' }],
            userName: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.userName'), trigger: 'blur' }],
            userPassword: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.userPassword'), trigger: 'blur' }],
            protocolAddress: [{ required: true, message: this.$i18n.t('CDNBuild.protocolAddress'), trigger: 'blur' }],
            requestAddress: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.requestAddress'), trigger: 'blur' }],
            callBackAddress: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.callBackAddress'), trigger: 'blur' }],
            serviceProvider: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.serviceProvider'), trigger: 'blur' }],
            protocolType: [{ required: true, message: "CDN "+this.$i18n.t('CDNBuild.protocolType'), trigger: 'blur' }],
        },
    }
  },
  methods:{
      tableCellClick: function(row, event, column) {
        this.isShowEditForm = true;
        if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields();
        }
        this.editForm = row;
      },
      onAdd: function() {
        this.isShowEditForm = true;
        if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields();
        }
        this.editForm.name =                ""
        this.editForm.serviceName =         ""
        this.editForm.serviceAddress =      ""
        this.editForm.userName =            ""
        this.editForm.userPassword =        ""
        this.editForm.protocolAddress =     ""
        this.editForm.requestAddress =      ""
        this.editForm.callBackAddress =     ""
        this.editForm.messageType =         ""
        this.editForm.protocolType =        ""
        this.editForm.serviceProvider =     ""
      },
      onDelete: function() {

          this.$confirm(this.$t('CDNBuild.areYouSureYouWantToDelete'), 
          this.$i18n.t("message.confirmTitle"), {
                confirmButtonText: this.$i18n.t("message.yes"),
                cancelButtonText: this.$i18n.t("message.cancel"),
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
  },
  mounted: function mounted() {
        this.tableHeight = document.body.clientHeight - this.$refs.queryBox.offsetHeight -  this.$refs.pageBox.offsetHeight - 120;
        this.isInit = true;
        this.onQuery();
  }
}


</script>

<style scoped>

</style>
